<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-form-item :label="$t('column.show')">
          <el-switch v-model="column.show"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="4" v-if="column.show">
        <el-form-item :label="$t('column.title')">
          <el-input v-model="column.title" readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item :label="$t('column.filter')">
          <el-switch v-model="column.filter"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="4" v-if="column.filter">
        <el-form-item :label="$t('column.filterPlacement')">
          <el-select v-model="column.filterPlacement">
            <el-option :key="item.key" :value="item.value" :label="item.text" v-for="item in filterPlacements"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4" v-if="column.filter">
        <el-form-item :label="$t('column.filterMultiple')">
          <el-switch v-model="column.filterMultiple"></el-switch>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item :label="$t('column.search')">
          <el-switch v-model="column.search.disabled"></el-switch>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: "v-column",
  props: {
    column: {
      type: Object,
      default: () => {
      }
    }
  },

  data: () => {
    return {
      filterPlacements: [
        {value: "top", text: "顶端对齐"},
        {value: "top-start", text: '顶端开始'},
        {value: "top-end", text: '顶端结束'},
        {value: "bottom", text: '底端对齐'},
        {value: "bottom-start", text: '底端开始'},
        {value: "bottom-end", text: '底端结束'},
        {value: "left", text: '左端对齐'},
        {value: "left-start", text: '左端开始'},
        {value: "left-end", text: '左端结束'},
        {value: "right", text: '右端对齐'},
        {value: "right-start", text: '右端开始'},
        {value: "right-end", text: '右端结束'}
      ]
    };
  },

  created() {
    // console.log(this.filterPlacements)
  },
  methods: {}
}
</script>

<style scoped>
</style>
